<template>
  <div class="list-container orderList">
     <div class='topbar clearfix'>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{path:'/order/orderList'}">订单管理</el-breadcrumb-item>
            <el-breadcrumb-item>订单列表</el-breadcrumb-item>
          </el-breadcrumb>
          <div class="fr topRight">
              <!-- <span>共{{total}}个商品</span> -->
              <div class="seach clearfloat">
                <el-input v-model="seachName" @keyup.native.enter="seachClick" style="float:left" placeholder="请输入商品名、订单编号、买家用户名或买家手机号进行搜索"></el-input>
                <div class="seachBtn" @click="seachClick">搜索</div>
              </div>
          </div>
      </div>
      <div class="header">
          <div class="navList clearfix ">
              <span class='fl'>下单时间</span>
              <div class="fl datePicker  pickerMine">
                <el-date-picker
                    class="input dateShop"
                    @change="dateChange"
                    v-model="dateValue"
                    type="datetimerange"
                    range-separator="~"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
              </div>
          </div>
      </div>
      <ul class="switch-tab">
        <li v-for="(item,index) in selectShelfStatus" 
        @click="switchBar(item,index)"
        :class="{active_li:activeIndex==index}"
        :key="index">
          {{item.desc}}
        </li>
      </ul>
      <div class="nav">
          <div class="tableHeader clearfloat">
              <div class="tableLi tableHeaderImg">商品信息 </div>
              <div class="tableLi tableHeaderDetail"> 商品单价</div>
              <div class="tableLi tableHeaderStatus">数量</div>
              <div class="tableLi tableHeaderPrice">出行日期</div>
              <div class="tableLi tableHeaderPrefer">买家</div>
              <div class="tableLi tableHeaderDate">订单状态</div>
              <div class="tableLi tableHeaderPay">实付款</div>
              <div class="tableLi tableHeaderHandle">操作</div>
          </div>
          <ul class="navList clearfloat">
            <li v-if='!navList.length' class='nodata'>暂无数据</li>
              <li v-for="(item,index) in navList" :key="index" v-else>
                  <div class="font clearfloat">
                      <p>
                        <span>下单时间：</span>
                        <span>{{getTimeDate(item.createdTime,'yyyy-MM-dd hh:mm')}}</span>
                      </p>
                      <i class="line"></i>
                      <p>
                        <span>订单编号：</span>
                        <span>{{item.sn}}</span>
                      </p>
                      <i class="line"></i>
                      <p>
                        <span>所属项目：</span>
                        <span  @click.stop="ToProjectDetail(item)" class="blue">{{item.merchProjectName }}</span>
                      </p>
                  </div>
                  <div class="table clearfloat">
                      <!-- 商品信息  -->
                      <div class="tableDiv HeaderImg clearfloat" ref="HeaderImg"  @click.stop="goMerchDetail(item)">
                        <img :src="item.picAttachDetail?item.picAttachDetail.fileUrl:'https://cdn.yueyangshuyuan.com/%E4%BC%9A%E5%91%98%E5%8D%A1%E7%89%87.png'" class="fl"/>
                        <span class='fl'>{{item.merchTitle }}</span>
                      </div>
                      <!--  商品单价 -->
                      <div class="tableDiv HeaderDetail" ref="HeaderDetail">
                          <div class="PriceList">
                            <span>¥</span>
                            <span class="price">{{item.merchPrice }}</span>
                            <span class="pd">元/人</span>
                          </div>
                      </div>
                      <!-- 数量 -->
                      <div class="tableDiv HeaderStatus" ref="HeaderStatus">{{item.merchCount}}</div>
                      <!-- 出行日期 -->
                      <div class="tableDiv HeaderPrice" ref="HeaderPrice">
                         <span>{{getTimeDate(item.merchEffectDate ,'yyyy年MM月dd日')}}</span>
                      </div>
                      <!--买家  -->
                      <div class="tableDiv HeaderPrefer clearfloat" ref="HeaderPrefer">
                        <div>
                          <span class='name'>{{item.creatorName}}</span>
                          <span class='phone'>{{item.creatorPhone }}</span>
                        </div>
                      </div>
                      <!--订单状态  -->
                      <div class="tableDiv HeaderDate" ref="HeaderDate">{{getMerchType(item.status )}}</div>
                      <!--实付款  -->
                      <div class="tableDiv HeaderPay" ref="HeaderPay">
                        <div class="PriceList">
                            <span>¥</span>
                            <span class="price">{{item.transPrice }}</span>
                            <span class="pd">元</span>
                          </div>
                      </div>
                      <!-- 操作 -->
                      <div class="tableDiv HeaderHandle clearfloat" ref="HeaderHandle">
                        <div> 
                          <div class="HandleList" @click.stop="goOrderDetail(item)">查看详情</div>
                          <div class="HandleList" @click.stop="ToEidt(2,item)" v-if="item.status == 20">订单核销</div>
                          <div class="HandleList" @click.stop="ToEidt(3,item)" v-if="item.status == 20">订单退款</div>
                        </div>
                      </div>
                  </div>
              </li>
          </ul>
          <div class="pagination" v-if="total>dataParm.pageSize">
            <el-pagination
                background
                :current-page.sync='dataParm.pageNo'
                @current-change="handleCurrentChange"
                :page-size="dataParm.pageSize"
                :pager-count="11"
                layout="prev, pager, next"
                :total="total">
            </el-pagination>
          </div>
      </div>
      <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="300px"
      :before-close="handleClose">
      <span>{{dialogContent}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureBtn()">确 定</el-button>
      </span>
      </el-dialog>
      <my-orderWriteOff :dialogData="dialogData" @writeOffFlaseFun=writeOffFlaseFun :id=id></my-orderWriteOff>
      <my-orderMoney :dialogData="dialogData" :id=id @sumitHandleFlaseFun=sumitHandleFlaseFun></my-orderMoney>
  </div>
</template>

<script>
import api from "@/fetch/url";
import {FormatDate,transformPrice} from '@/utils/index.js'
import orderWriteOff from "../../components/order/index.vue"
import orderMoney from "../../components/order/indexMonery.vue"
export default {
   components: {
    "my-orderWriteOff":orderWriteOff, 
    "my-orderMoney":orderMoney
  },
  data() {
    return {
        dialogData:{
          dialogVisible:false,
          dialogVisibleM:false,
        },
        shelfStatus:[],
        selectShelfStatus:[
          {
            code:'',
            desc:'全部订单',
          },{
            code:10,
            desc:'待付款',
          },{
            code:20,
            desc:'待出行',
          },{
            code:30,
            desc:'已成交',
          },{
            code:40,
            desc:'已取消',
          },{
            code:50,
            desc:'退款/售后',
          }
        ],
        dataParm:{
          keyWord:'',
          createStartTime:'',
          createEndTime:'',
          status:'',
          pageNo:1,
          pageSize:10
        },
       seachName:"",
       navList:[],
       total:0,
       merchSaleType:[],
       dialogVisible:false,
       delItem:{},
       dialogType:-1,//1上架下架商品2删除商品
       dialogContent:'',
       projectStateActive:-1,
       projectName:'',
       options: [],
       id:"",
       dateValue:'',
       activeIndex:0,
    }
  },
  created() {
    this.getGoodsPage();
  },
  computed:{
      getTimeDate(){//获取时间戳
        return (time,format)=>{
          if(time){
            return FormatDate(new Date(Number(time)),format)
          }
        }
      },
      getMerchType(){//获取优惠活动
        return (code)=>{
           switch(Number(code)){
             case 10:
               return '待付款';
             break;
             case 20:
               return '待出行';
             break;
             case 30:
               return '已成交';
             break;
             case 40:
               return '已取消';
             break;
             case 50:
               return '已退款';
             break;
           }
        }
      },
      getMoney(){
        return (val)=>{
          return transformPrice(Number(val))
        }
      }
  },
  mounted() {
    // document.title = "建课word导入";
    
  },
  methods: {
    writeOffFlaseFun(){
      this.dialogData.dialogVisible=false;
      this.getGoodsPage();
    },
    sumitHandleFlaseFun(index){
      this.dialogData.dialogVisibleM=false;
      if(index){  //提交完成刷新列表
        this.getGoodsPage(); 
      }
    },
    switchBar(item,index){
      this.dataParm.keyWord = this.seachName;
      this.activeIndex = index;
      this.dataParm.status = item.code;
      this.dataParm.pageNo = 1;
      this.getGoodsPage();
    },
    dateChange(){
      if(this.dateValue){
        //  let beginDate =  FormatDate(new Date(Number(this.dateValue[0])),'yyyy-MM-dd hh:mm');
        //  let endDate =  FormatDate(new Date(Number(this.dateValue[1])),'yyyy-MM-dd hh:mm');
        //  console.log(this.dateValue)
        let beginDate,endDate;
        beginDate = new Date(Number(this.dateValue[0]));
        endDate = new Date(Number(this.dateValue[1]));
        this.dataParm.createStartTime = beginDate.getTime();
        this.dataParm.createEndTime = endDate.getTime();
      }else{
        this.dataParm.createStartTime = '';
        this.dataParm.createEndTime = '';
      }
      this.dataParm.pageNo = 1;
      this.getGoodsPage();
    },
    selectChange(){
       this.getGoodsPage();
    },
    //点击进入项目详情
    ToProjectDetail(item){
      this.$router.push({
          path:'/project/projectList/detailProject',
          name:'detailProject',
          params:{
              id:item.merchProjectId,
          },
      })
    },
    operStatusChange(){
       this.dataParm.pageNo = 1;
       this.getGoodsPage();
     },
     getGoodsPage(){
       api.merchOrder({...this.dataParm}).then(json=>{
          this.navList = json.list;
          this.total = json.total;
       })
     },
     //点击进入商品详情
     goMerchDetail(item){
        this.$router.push({
          path:'/project/shopList/detailShop',
          name:'detailShop',
          params:{
              id:item.merchId,
          },
      })
     },
    //点击进入订单详情
    goOrderDetail(item){
        this.$router.push({
          path:'order/orderList/orderDetail',
          name:'orderDetail',
          params:{
              id:item.id,
          }
        })
    },
    ToEidt(oprate,item){//去编辑
    console.log(item,89898);
        switch(oprate){
           case 2:  //核销
             this.id=item.id;
             this.dialogData.dialogVisible=true;
             break;
           case 3: //退款
             this.id=item.id;
             this.dialogData.dialogVisibleM=true;
             break;
        }
    },
    delGoods(item,index){//删除商品
      this.dialogVisible = true;
      this.dialogType = 2;
      this.delItem = item;
      this.delItem.index = index;
      this.dialogContent = '确定要删除该商品吗?'
      
    },
    handleClose(){
      this.dialogVisible = false;
    },
    sureBtn(){
      if(this.dialogType == 1){
          api.merchAlterStatus({
            merchId:this.delItem.id,
            shelfStatus:this.delItem.shelfStatus === 1?9:1
          }).then(json=>{
             this.getGoodsPage();
             this.delItem = {};
             this.dialogVisible = false;

          })
      }else if(this.dialogType == 2){//删除商品
          api.delMerch({
            merchId:this.delItem.id,
          }).then(json=>{
            this.toastMsg('删除成功','success');
            this.getGoodsPage();
            // this.navList.splice(this.delItem.index,1);
            this.delItem = {};
            this.dialogVisible = false;
          })
      }
    },
    toastMsg(msg,type){
      this.$message({
        message: msg,
        type: type
      });
    },
    //点击搜索
    seachClick(){
       this.dataParm.pageNo = 1;
       this.dataParm.keyWord = this.seachName;
       this.getGoodsPage();
    },
     //点击分页触发列表接口
     handleCurrentChange(val) {
       this.dataParm.pageNo = val;
       this.getGoodsPage();
     }
  }
}
</script>
<style  lang="scss">
.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
  background-color: #fff;
}
.el-dialog{
    border-radius: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
}
.projectNameSelect .el-select-dropdown__item {
   overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}
  .projectNameSelect  .el-select-dropdown__item.selected{
    color: #FC612A;
  }

  .orderList .topbar .topRight .seach .el-input .el-input__inner{
    width:352px;
  }
  .orderList .header .navList{
    border:none;
  }
  .el-date-editor.el-input, .el-date-editor.el-input__inner{
    width: 533px;
  }
  .pickerMine{
        .input{
          padding-top: 0!important;
        }
        .el-date-editor {
          position: relative;
        }
        .el-date-editor .el-range__icon{
          color: #409EFF;
          line-height: 17px;
          position: absolute;
          right: 10px;
        }
        .el-date-editor .el-range-separator{
          line-height: 26px;
          color: #777777;
          width: 10px;
          padding: 0;
        }
        .el-date-editor .el-range-input{
          color: #777777;
          width: 200px;
        }
        .el-date-editor .el-range__close-icon{
          line-height: 17px;
          color: #777777;
        }
        .el-range-input{
          border:none;
          height: 26px;
          padding-left: 0;
        }
        ::-webkit-input-placeholder {
          font-size: 14px;
          color: #777777;
        }
        ::-moz-input-placeholder {
          font-size: 14px;
          color: #777777;
        }
        :-ms-input-placeholder {
          font-size: 14px;
          color: #777777;
        }
      }
  
</style>
<style lang="scss" scoped>
   .topbar{
    .topRight{
      .seach{
        .el-input{
          width:352px!important;
        }
      }
    }
  }
  .header {
      width: 100%;
      min-width:1180px;
      border-radius:4px;
      height: 44px;
      display: flow-root;
      padding-left: 0;
       .list{
          margin-top: 10px;
          padding-left: 10px;
       }
      .navList {
          box-sizing: border-box;
          height: 44px;
          padding-left: 10px;
          padding-top: 10px;
          >span{
            font-size: 14px;
            color: #262626;
            line-height: 26px;
            margin-right:10px;
          }
          .pickerMine{
            margin-right:26px;
          }
      }
  }
  .switch-tab{
    display:flex;
    border-bottom:1px solid #E2E2E4;
    padding-top:14px;
    padding-left:10px;
    li{
      width:68px;
      height: 30px;
      line-height:20px;
      font-size: 14px;
      color: #262626;
      margin-right:26px;
      padding-bottom:10px;
      position: relative;
      text-align: center;
      cursor: pointer;
      &:before{
        display: none;
        content:'';
        position: absolute;
        bottom:-3px;
        left:50%;
        transform:translate(-50%,-50%);
        -webkit-transform:translate(-50%,-50%);
        -moz-transform:translate(-50%,-50%);
        background: #FC612A;
        width:36px;
        height: 3px;
      }
    }
    .active_li{
      &:before{
        display: block;
      }
    }

  }
  .nav {
    .top {
      padding:20px 0 0px 0;
      box-sizing: border-box;
      .addProject {
        float: left;
        width: 150px;
        height: 40px;
        color: #fff;
        text-align: center; 
        background: #1890ff;
        cursor: pointer;
        border-radius: 4px;
        line-height: 40px;
      }
      span {
        float: left;
        margin-left:30px;
        line-height: 40px;
      }
    }
    .navList {
      padding:0;
      margin:0;
      li {
         border: 1px solid #E9E9E9;
         float: left;
         width:100%;
         background: #fff;
         min-width:1180px;      
         cursor: inherit;
         margin-top: 0;
         margin-bottom: 20px;
        .table {
            padding: 14px 16px;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            // align-items: center;
            .tableDiv {
              float: left;
              margin-left:20px;
              .miueList {
                float: left;
                width:60px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                font-size: 14px;
                color: #fff;
              };
              .upIng{
                color: #FC612A
              }
              .closeStatus{
                color: #8C8C8D
              }
              .BeopenedStatus{
                color: #26A9FF;
              }
            }
            .HeaderImg {
              margin-left:0px;
              cursor: pointer;
              img{
                width: 90px;
                height: 64px;
                background: #ccc;
                margin-right:8px;
              }
              span{
                width:calc(100% - 100px);
                align-items: center;
                position: relative;
                top: 19px;
                font-size: 14px;
                color: #262626;
                word-break: break-all;
                text-align: left;
              }
            }
            .HeaderDetail {
              .PriceList{
                font-size: 12px;
                color: #262626;
                font-weight:bold;
                padding-top: 19px;
                // height: 64px;
                // display: flex;
                // align-items: center;
                // justify-content: center;
                .price{
                  font-size: 14px;
                  padding:0 2px;
                }
                .pd{
                   font-weight:normal;
                }
              }
              
            }
            .HeaderStatus{
              padding-top: 19px;
              font-size: 14px;
              font-weight:bold;
              color: #262626;
            }
            .HeaderPrice {
              padding-top: 18px;
              font-size: 12px;
              color: #262626;
            }
            .HeaderPrefer {
              padding-top: 16px;
              font-size: 12px;
              span{
                display: block;
                text-align:center;
              }
              .name{
                color: #262626;
                margin-bottom:8px;
              }
              .phone{
                color: #777777;
              }
            }
            .HeaderDate {
              padding-top: 19px;
              color: #26A9FF;
              font-size: 12px;
            }
            .HeaderPay{
              .PriceList{
                padding-top: 19px;
                justify-content: center;
                font-size: 14px;
                color: #FC612A;
                font-weight:bold;
                .price{
                  font-size: 18px;
                  padding:0 2px;
                }
                .pd{
                  font-size: 12px;
                  color: #262626;
                }
              }
            }
            .HeaderHandle {
              width: 100px;
              text-align: center;
              padding-top: 18px;
              .HandleList {
                width:100%;
                text-align: center;
                font-size: 12px;
                color: #26A9FF;
                cursor: pointer;
                line-height:23px;
                // margin-bottom:8px;
              }
              .HandleList:hover {
                  opacity: 0.8;
              }
            }
        }
        .font {
          background: #F5F5F7;
          height: 32px;
          line-height: 32px;
          padding-left: 12px;
          p {
            float: left;
            box-sizing: border-box;
            font-size: 12px;
            color: #777777;
            margin-right:20px;
            .blue {
              color: #262626;
              cursor: pointer;
              &:hover{
                opacity: 0.8;
              }
            }
           
            //  &:nth-of-type(3){
            //   float:right;
            // }
          }
          .line{
            float: left;
            display: inline-block;
            width: 1px;
            height: 12px;
            background: #777;
            position: relative;
            top: 10px;
            left: -9px;
          }
        }
      }
      .nodata{
        width: 100%;
        height:200px;
        line-height: 200px;
        text-align:center;
      }
    }
    .pagination {
      margin-top:30px;
      text-align: center;
    }
    .tableHeader {
      padding:0 20px;
      box-sizing: border-box;
      margin:10px 0 0 0;
      min-width:1180px;
      .tableLi {
        float: left;
        margin-right:20px;
        font-size: 12px;
        color: #777777;
        height: 32px;
        line-height: 32px;
        text-align: center;
      }
      .tableHeaderImg{
        text-align: left;
      }
    }
    .tableDiv{
      text-align: center;
    }
     .tableHeaderImg ,.HeaderImg{
        width:calc(100% - 910px);
      }
      .tableHeaderDetail ,.HeaderDetail{
        width:100px;
      }
      .tableHeaderStatus,.HeaderStatus {
        width:60px;
      }
      .tableHeaderPrice,.HeaderPrice {
        width: 130px;
      }
      .tableHeaderPrefer,.HeaderPrefer {
        width: 160px;
      }
      .tableHeaderDate ,.HeaderDate{
        width: 100px;
      }
      .tableHeaderPay,.HeaderPay{
        width: 100px;
      }
      .tableHeaderHandle,.HeaderHandle {
         width: 100px;
         text-align: center;
      }
  }
</style>